<template>
  <div>
    <div
      style="display: inline-block; position: relative"
      :class="images ? 'hh' : ''"
    >
      <el-upload
        class="avatar-uploader"
        :action="fileUpload_url"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :limit="0"
        list-type="picture-card"
      >
        <img v-if="images" :src="images" class="avatar" />
        <el-icon
          v-if="!images"
          class="iconfont icon-yunduanshangchuan avatar-uploader-icon"
        >
          <p style="font-size: 14px">上传图片</p>
        </el-icon>
      </el-upload>

      <div class="operate-img" v-if="images">
        <span
          @click="dialogVisible = true"
          class="operate-img-icon"
          style="padding-right: 40px"
        >
          <el-icon class="iconfont icon-yulan operate-img-icon"></el-icon>
        </span>
        <span @click="del" class="operate-img-icon">
          <el-icon class="iconfont icon-shanchu operate-img-icon"></el-icon>
        </span>
      </div>
      <el-dialog v-model="dialogVisible" style="width: 600px">
        <img
          :src="images"
          alt="Preview Image"
          style="height: 500px; width: 500px"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script >
import { fileUpload_url, fileDownload_url } from "@/config/conster";
import { reactive, toRefs, watch } from "vue";

export default {
  name: "test",
  props: {
    images: String, //营业执照图片
    // legalFacePhoto: String, //法人身份证正面图片
    // legalBackPhoto: String, //法人身份证反面图片
    // linkFacePhoto: String, //联系人身份证正面图片
    // linkBackPhoto: String, //联系人身份证反面图片
  },
  setup(props, { emit }) {
    let data = reactive({
      images: "",
      dialogVisible: false,
      fileUpload_url: fileUpload_url,
    });

    watch(
      () => props.images,
      (newValue, oldValue) => {
        if (newValue != "") {
          props.images = newValue;
          data.images=props.images
         
        }
      },
      { immediate: true }
    );

    //文件上传成功
    const handleAvatarSuccess = (response, file) => {
      data.images = fileDownload_url + response.data;
      emit("imageValue", data.images);
    };

    let del = () => {
      data.images = "";
      emit("imageValue", data.images);
    };


    //文件上传失败
    const beforeAvatarUpload = (file) => {
      const imgTypes = ["image/jpeg", "image/png", "image/gif"];
      const isJPG = imgTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        ElMessage.error("图片格式必须是jpg、png、gif");
      }
      if (!isLt2M) {
        ElMessage.error("图片格大小不能超过2M");
      }
      return isJPG && isLt2M;
    };

    return { ...toRefs(data), handleAvatarSuccess, beforeAvatarUpload, del };
  },
};
</script>

<style >
.avatar-uploader {
  position: relative;
  width: 178px;
  height: 178px;
  /* margin-left: calc(50% - 89px); */
}
.avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  flex-direction: column;
}

.el-upload--picture-card {
  --el-upload-picture-card-size: 178px;
}

.el-form-item__error {
  font-size: 14px;
  left: 11px;
}

.avatar {
  text-align: center;
  width: 178px;
  height: 178px;
}

.operate-img {
  position: absolute;
  width: 178px;
  height: 178px;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3);
  line-height: 178px;
  left: 0px;
  top: 0px;
  display: none;
  text-align: center;
}

.hh:hover .operate-img {
  display: block;
}

.operate-img .operate-img-icon {
  font-size: 24px;
  color: #fff;
  /* border: 1px solid red; */
}
</style>
 